let grid_v = new Vue({
    el: ".grid",
    data: {
        arr: []
    },
    created: function () {
        if (location.search.indexOf("cid")!=-1){//包含cid 查询某个分类下的作品
            let cid = location.search.split("=")[1];
            //请求某个分类下的作品
            axios.get("/product/selectByCid?cid="+cid).then(function (response) {
                grid_v.arr = response.data;
            })
        }else if(location.search.indexOf("wd")!=-1){
            let wd = location.search.split("=")[1];
            axios.get("/product/search?wd="+wd).then(function (response) {
                grid_v.arr = response.data;
            })
        }else{//代码需要查询所有作品
            //请求所有作品信息
            axios.get("/product/select").then(function (response) {
                grid_v.arr = response.data;
            })
        }
    },
    updated: function () {
        //此方法当Vue data里面的变量值发生改变时运行
        //通过瀑布流插件控制页面显示
        $(".grid").imagesLoaded().progress(function () {
            $(".grid").masonry({
                itemSelector: ".grid-item",
                columnWidth: 210
            })
            //给图片所在div添加鼠标移入移出事件  hover代表移入移出事件
            $(".grid-item").hover(function () {//移入触发
                //$(this)代表移入的div
                //得到移入div里面的子div(代表蓝条div)
                $(this).children("div").fadeIn(500);
            }, function () {//移出触发
                $(this).children("div").fadeOut(500);
            })
        })
    }
})